import React from 'react';
import { bindActionCreators } from 'redux';
import * as TodoActions from '../actions';
import { connect } from 'react-redux';
import Nav from './nav/Nav.jsx';
import $ from 'jquery';
import auth from './routes/auth.js';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data_modules: [],
      loggedIn: auth.loggedIn()
    }

    this.updateAuth = this.updateAuth.bind(this);
  }
  
  updateAuth(loggedIn) {
    this.setState({
      loggedIn: !!loggedIn
    })
  }

  componentWillMount() {
    auth.onChange = this.updateAuth
    auth.login()
  }

  componentDidMount() {
    var that = this;
    $.ajax('/src/data/data-modules.json')
      .done(function (data) {
        that.setState({
          data_modules: data
        })
      });
  }

  render() {
    return (
      <div className="wrapper">
        {this.state.loggedIn ? (<Nav options={this.state.data_modules} />) : (<div/>)}

        {this.props.children}
      </div>
    );
  }
};

const mapStateToProps = state => ({
  todos: state.todos
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(TodoActions, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);





